﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>相簿</title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"></link>
	<link href="../css/reset.css" rel="stylesheet" type="text/css"></link>
	<link href="../css/common.css" rel="stylesheet" type="text/css"></link>
	<link href="../css/pxmain.css" rel="stylesheet" type="text/css"></link>
	<script type="text/javascript" src="../js/jquery/jquery.js"></script>
    <script type="text/javascript" src="../js/modernizr.js"></script>
	<!--[if IE 6]>
	<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js" ></script>
	<script type="text/javascript">
	DD_belatedPNG.fix('.user-setting,.zan-ico, .ico-hit, .ico-laud, .icon-downlowd, .icon-share,.show-wall .show-pager span ,.model-logo-one');
	</script>
	<![endif]-->
</head>
<body>
<section class="upload-boxbg pa">
	<div class="upload-box pr">
    	<h3 class="upT">上传照片<span class="close-box pa">×</span></h3>
        <div class="addAlbum">
            <div class="selectAlbum">
                <label class="forAlbum">选择专辑</label>
                <select class="Albumlist">
                	<option>专辑一</option>
                    <option>专辑二</option>
                    <option>专辑三</option>
                    <option>专辑四</option>
                </select>
                <button type="button" class="newAlbumBtn">+创建新专辑</button>
            </div>
            <div class="newAlbum pa">
                    	<section class="editAlbum-box pr">
                        	<h3 class="eaT">新建专辑<span class="close-box pa">×</span></h3>
                            <div class="editAlbumData">
                                <form action="#">
                                	<div class="editAlbumList">
                                        <label class="forName">专辑名称：</label><input type="text" class="newAlbumName" />
                                    </div>
                                    <div class="editAlbumList">
                                        <label class="forDescribe">专辑描述：</label><textarea class="newAlbumDescribe"></textarea>
                                    </div>
                                    <div class="editAlbumList">
                                        <label class="forTitle">专辑标签：</label><input type="text" class="newAlbumTitle" />
                                    </div>
                                    <div class="editAlbumList">
                                        <label class="forSort">所属类别：</label>
                                        <select class="addAlbumSort">
                                        	<option>分类1</option>
                                            <option>分类2</option>
                                            <option>分类3</option>
                                            <option>分类4</option>
                                        </select>
                                    </div>
                                </form>
                            </div>
                            <div class="editAlbumFinish clearfix">
                            	<button type="submit" class="albumSub rfloat">保存</button>
                                <button type="button" class="exit rfloat">取消</button>
                            </div>
                        </section>
            </div>
            <div id="picBox" class="pic-box pr clearfix">
            	<form action="#">
                <input type="file" id="uploadFile" class="hidden" multiple />
            	<div id="TS" class="TS ac">
                	<span class="T1 block">请将照片拖放到此处</span>
                    <span class="T2 block mtm">或者</span>
                    <button type="button" id="localPC" class="localPC mtl">选择电脑中的照片</button>
                </div>
                <ul id="uploadData" class="uploadData">
                	<li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                    <li class="picList">
                    	<div class="delPic pa">
                        	<span class="delThis">×</span>
                        </div>
                    </li>
                </ul>
                </form>
            </div>
            <div class="uploadfinish clearfix pal">
                	<button type="submit" id="uploadSub" class="uploadSub rfloat">上传</button>
                    <button type="button" class="editbox rfloat">取消</button>
                    <button type="button" id="continueUP" class="continueUP">继续添加</button>
            </div>
        </div>
    </div>
</section>



<!--===================拖拽测试FF5\chrome12==========================-->
<script type="text/javascript">
	$(function(){
		var oDropBox = document.getElementById('picBox'),
		//var oDropBox = $("#"),
		//oImgInfo = document.getElementById('imgInfo');
		oImgInfo = $("#uploadData");
		var $brow = $.browser;
		var $divimg = $("#uploadData li:not(:has(img))");
		var $delimg = $("#uploadData li");
		//alert($divimg.length);
		var img = document.getElementById('imgg');
		var ts = $("#TS");
		oDropBox.addEventListener('dragover', function(e) {//侦听事件并处理函数
			e.stopPropagation();							//该方法将停止事件的传播，阻止它被分派到其他 Document 节点
			e.preventDefault();								//取消事件的默认动作
		}, false);
		oDropBox.addEventListener('drop', handleDrop, false);
		function handleDrop(e) {
			e.stopPropagation();
			e.preventDefault();
			var fileList = e.dataTransfer.files,　　//获取拖拽文件
			fileType = fileList[0].type,
			　　　　// oImg = document.createElement('img'),
			reader = new FileReader();
			
			if (fileType.indexOf('image') == -1) {  //检测文件是否图片
				alert('请拖拽图片~');
				return;
			};
			var $divimg = $("#uploadData li:not(:has(img))");
			if(fileList != ""){
				ts.hide();
				oImgInfo.show();
				$(".continueUP").show();
			};
			if($brow.mozilla == true){
			　　//FF4+
				//var newfileList = new Array();
				$.each(fileList,function(index){
					//var newfileList = new Array();
					var numm = window.URL.createObjectURL(this);
					$divimg.eq(index).append('<img src='+numm+' alt="" />');
					//newfileList.splice(0,0,numm);
			　　		//img.src = window.URL.createObjectURL(fileList[0]);
					//$(".uploadfinish").append('<span>'+index+"</span>:<span>"+numm+"</span><br/>");
					});
					var oldfile = fileList;
					
					//alert(oldfile.length);
					//newfileList = newfileList.concat(oldfile);
					//alert(newfileList.length);
					//var newfileList = newfileList + fileList;
				//img.src = window.URL.createObjectURL(fileList[0]);
			　}else if($brow.webkit == true){
			　　//Chrome8+
				$.each(fileList,function(index){
					var numm = window.webkitURL.createObjectURL(this);
					$divimg.eq(index).append('<img src='+numm+' alt="" />');
			　		//img.src = window.webkitURL.createObjectURL(fileList[0]);
					//$(".uploadfinish").append('<span>'+index+"</span>:<span>"+numm+"</span><br/>");
					});
			　};
		};
		$("#localPC,#continueUP").click(function(){
			$("#uploadFile").click();
		});
		
		$("#uploadFile").change(function(){
			var fileList1 = document.getElementById('uploadFile').files;
			var $divimg = $("#uploadData li:not(:has(img))");
			if(fileList1 != ""){
				ts.hide();
				oImgInfo.show();
				$(".continueUP").show();
			};
			if($brow.mozilla == true){
			　　//FF4+
			$.each(fileList1,function(index){
					var numm = window.URL.createObjectURL(this);
					$divimg.eq(index).append('<img src='+numm+' alt="" />');
			　　		//img.src = window.URL.createObjectURL(fileList[0]);
					//$(".uploadfinish").append('<span>'+index+"</span>:<span>"+numm+"</span><br/>");
					});
					
				//img.src = window.URL.createObjectURL(fileList[0]);
			　}else if($brow.webkit == true){
			　　//Chrome8+
				$.each(fileList1,function(index){
					var numm = window.webkitURL.createObjectURL(this);
					$divimg.eq(index).append('<img src='+numm+' alt="" />');
			　		//img.src = window.webkitURL.createObjectURL(fileList[0]);
					//$(".uploadfinish").append('<span>'+index+"</span>:<span>"+numm+"</span><br/>");
					});
			　};
			//alert(fileList1.length);
		});
		$("button.newAlbumBtn").click(function(){
			$(".newAlbum").show();
		});
		$(".close-box,.editAlbumFinish .exit").click(function(){
			$(".newAlbum").hide();
		});
		$delimg.hover(function(){
			$(this).children(".delPic").show();},function(){
				$(this).children(".delPic").hide();});
		$(".delThis").click(function(){
			$(this).parent().siblings(img).remove();
		});
		
	})
	
</script>
</body>  
</html>